<template>
  <div class="home">
    <loading v-if="isLoading" :msg="'请先登录'"></loading>
    <div class="head">
      <router-link to="/home"><div class="logo fl"></div></router-link>
      <div class="use fl">
        <!-- <router-link to="/about"><div class="search"></div></router-link> -->
        <router-link to="/search"><div class="search fl"></div></router-link>
        <button><div class="user fl" @click="logonuser"></div></button>
      </div>
    </div>
    <home-nav></home-nav>
    <home-list></home-list>
  </div>
</template>
<script>
import Loading from "@/components/loading/longincg.vue";
import HomeNav from '../components/homexq/homenav.vue'
import HomeList from "../components/homexq/homelist.vue";
export default {
  data(){
    return{
      isLoading: false,
    }
  },
  components: {
    HomeNav,
    HomeList,
    Loading,
  },
  methods: {
    logonuser() {
      let datastr = localStorage.getItem("userdata");
      if (datastr !== null) {
        this.$router.push({ path: "/user" })
      }else{
        this.isLoading = true;
        const that = this;
        setTimeout(function () {
          that.isLoading = false;
       that.$router.push({ path: "/login" });
        }, 1200);
      }
    },
  },
};
</script>
<style lang="scss">
@import url(../static/css/reset.css);
.home {
  width: 100%;
  text-align: center;
}
.head {
  margin: auto 5%;
  width: 90%;
  height: 40px;
  background-color: white;
  .logo {
    // float: left;
    width: 30%;
    height: 34px;
    margin: 3px 0;
    background-image: url(../assets/logo.png);
    background-size: contain;
    background-repeat: no-repeat;
  }
  .use {
    margin-left: 50%;
    // float: right;
    box-sizing: border-box;
    // background: black;
    button{
      background-color: #fff;
    }
    .search,
    .user {
      // float: left;
      width: 30px;
      height: 30px;
      margin: 5px;
      background-size: contain;
      background-repeat: no-repeat;
    }
    .search {
      background-image: url(../assets/icon_search.png);
    }
    .user {
      background-image: url(../assets/icon_user.png);
    }
  }
}
</style>
